<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Neon Admin Panel" />
	<meta name="author" content="" />
	
	<title>${title}</title>

	<link rel="stylesheet" href="<c:url value="/assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css" />" >
	<link rel="stylesheet" href="<c:url value="/assets/css/font-icons/entypo/css/entypo.css" />">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
	<link rel="stylesheet" href="<c:url value="/assets/css/bootstrap.css" />" />
	<link rel="stylesheet" href="<c:url value="/assets/css/neon-core.css" />">
	<link rel="stylesheet" href="<c:url value="/assets/css/neon-theme.css" />">
	<link rel="stylesheet" href="<c:url value="/assets/css/neon-forms.css" />">
	<link rel="stylesheet" href="<c:url value="/assets/css/custom.css" />">
	<link rel="stylesheet" href="<c:url value="/assets/css/white.css" />">

	<script src="assets/js/jquery-1.11.0.min.js"></script>

	<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script src="<c:url value="/assets/js/gsap/main-gsap.js" />" ></script>
	<script src="<c:url value="/assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js" />" ></script>
	<script src="<c:url value="/assets/js/bootstrap.js" />"></script>
	<script src="<c:url value="/assets/js/joinable.js" />" ></script>
	<script src="<c:url value="/assets/js/resizeable.js" />" ></script>
	<script src="<c:url value="/assets/js/neon-api.js" />" ></script>
	<script src="<c:url value="/assets/js/jquery.validate.min.js" />" ></script>
	<script src="<c:url value="/assets/js/neon-login.js" />" ></script>
	<script src="<c:url value="/assets/js/neon-custom.js" />" ></script>
	<script src="<c:url value="/assets/js/neon-demo.js" />" ></script>
	<!-- Session Mgmnt -->
	<script src="<c:url value="/assets/js/subsession.js" />" ></script>
	<script type="text/javascript" src="<c:url value="/assets/js/common.js" />"></script>
	
	 
</head>
<body class="page-body login-page white login-form-fall" >


<!-- This is needed when you send requests via Ajax -->
<script type="text/javascript">
//------Commented for running app directly in TC server-----
//var baseUrl = 'http://localhost:8080/EZOPSDashboardUI';
 //var baseUrl = 'http://172.31.29.81:8080/EZOPSDashboardUI';
//var baseUrl = 'http://ec2-54-210-17-99.compute-1.amazonaws.com/EZOPSDashboardUI';
//var baseUrl = '../EZOPSDashboardUI';
</script>

<div class="login-container">
	
	<div class="login-header login-caret">
		
		<div class="login-content">
			
			<h1><a href="index.html" class="logo">
				<img src="assets/images/logo.png" alt="Ezops" width="120" title="Ezops" />
			</a></h1>
			
			<!-- progress bar indicator -->
			<div class="login-progressbar-indicator">
				<h3>43%</h3>
				<span>logging in...</span>
			</div>
		</div>
		
	</div>
	
	<div class="login-progressbar">
		<div></div>
	</div>
	
	<div class="login-form">
		
		<div class="login-content">
			
			<div class="form-login-error">
				<h3>Invalid login</h3>
				<p>Try again with corret credential .</p>
			</div>
			
			<form method="post" role="form" id="form_login">
				
				<div class="form-group">
					
					<div class="input-group">
						<div class="input-group-addon">
							<i class="entypo-user"></i>
						</div>
						
						<input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off" />
					</div>
					
				</div>
				
				<div class="form-group">
					
					<div class="input-group">
						<div class="input-group-addon">
							<i class="entypo-key"></i>
						</div>
						
						<input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
					</div>
				
				</div>
				
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-block btn-login login-btn">
						Login
						<i class="entypo-login"></i>
					</button>
				</div>
				
				<!-- Implemented in v1.1.4 				<div class="form-group">
					<em>- or -</em>
				</div>
				-->
				
				
				<!-- 
				
				You can also use other social network buttons
				<div class="form-group">
				
					<button type="button" class="btn btn-default btn-lg btn-block btn-icon icon-left twitter-button">
						Login with Twitter
						<i class="entypo-twitter"></i>
					</button>
					
				</div>
				
				<div class="form-group">
				
					<button type="button" class="btn btn-default btn-lg btn-block btn-icon icon-left google-button">
						Login with Google+
						<i class="entypo-gplus"></i>
					</button>
					
				</div> -->				
			</form>
			
			
			<div class="login-bottom-links">
				
				<a href="#" class="link">Forgot your password?</a>
				
				
				
			</div>
			
		</div>
		
	</div>
	
</div>
<script type="text/JavaScript">
        $(document).ready(function() {
        	
            $('.btn-login').click(function( e ) {
                
            	 $(".form-login-error").hide();
				var user=$('#username').val();
				var password=$('#password').val();
				var userObj = new Object();
				userObj.userId = user;
				userObj. password = password;
				var jsonData = JSON.stringify(userObj);
				  if(user==''){
                        $('#username').next('label').show();
                    } else  if(password==''){
                        $('#password').next('label').show();
                    } else {
					
					//--console.log(user + ' : ' + password);
					console.log('JSON Data : ' + jsonData);
					//--console.log('JSON Data Direct : ' +JSON.stringify({ userId:user,password:password}));
						//-----ajax request to server----
						
						
						
						var ajaxReq=$.ajax({
							url: ezopsContextPath+ '/login',
							type: 'POST',
					        dataType: 'text',
							data: jsonData,//---------------JSON.stringify({ userId:user,password:password}),
							contentType: 'application/json',
					        mimeType: 'application/json',
							success : function(data){
								neonLogin.setPercentage(100);
								
								
							 console.log("Response Text : "+data);
							 setTimeout(function()
										{
											// If login is invalid, we store the 
											if(data == 'invalid')
											{
												$(".login-page").removeClass('logging-in');
												neonLogin.resetProgressBar(true);
											}
											else
											if(data == 'valid')
											{
												
												setTimeout(function()
												{
													window.location.href=ezopsContextPath+'/dashboard';
												}, 400);
											}
											
										}, 1000);
							 
							 
							 
							 
							},
							error: function(data){

								 console.log("Error Response Text :");
								 console.log(data);
								 neonLogin.setPercentage(100);
									
									
									$(".login-page").removeClass('logging-in');
									neonLogin.resetProgressBar(true);
								}
											
						});
						
                    	}
                      });
        });
        
        //Application session mgmnt
        var uuid = generateUUID();
        function generateUUID() {
    	var d = new Date().getTime();
    	var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x7|0x8)).toString(16);
    });
    return uuid;
};
    </script>

	

</body>
</html>